<template>
  <view class="custom-tab-bar">
    <!-- 自定义底部导航栏的HTML结构 -->
    <view v-for="(item, index) in list" :key="index" class="tab-item" @click="switchTab(item.pagePath)">
		<view class="mode">
			<image :src="selected === index ? item.selectedIconPath : item.iconPath" class="tab-icon"></image>
			<text :class="{ 'tab-text-selected': selected === index }">{{ item.text }}</text>
		</view>
      
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      selected: 0,
      list: [
        {
          pagePath: "../../pages/newIndex/newIndex",
          text: "首页",
          iconPath: "/static/images/tabBar/index.png",
          selectedIconPath: "/static/images/tabBar/index-h.png"
        },
        {
          pagePath: "../../pages/individual/individual",
          text: "我的",
          iconPath: "/static/images/tabBar/user.png",
          selectedIconPath: "/static/images/tabBar/user-h.png"
        }
        // 可以继续添加更多标签页配置
      ]
    };
  },
  methods: {
    switchTab(pagePath) {
      // 切换页面逻辑
      uni.switchTab({
        url: pagePath
      });
    }
  }
};
</script>

<style scoped>
.custom-tab-bar {
  /* 样式代码 */
  height: 55px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  border-top: 1px solid #ccc; /* 这里 #ccc 是灰色的颜色代码 */
  /* 其他样式 */
}

.tab-item {
  /* 标签页样式 */
}
.mode{
	display: flex;
	flex-direction: column;
	margin-left: auto;
	margin-right: auto;
	align-items: center;
}
.tab-icon {
  height: 25px;
  width: 25px;
}

.tab-text-selected {
  /* 选中状态的文本样式 */
  color: #28B389;
}
</style>